<template>
  <div id="login">
    <form>
      <label for="username">
        <input type="text" class="input" id="username" placeholder="姓名"
          v-model="user.name">
      </label>
      <label for="pwd">
        <input type="password" class="input last" id="pwd" placeholder="密码（不少于6位）"
          v-model="user.pwd">
        <em v-show="req">*用户名或密码错误</em>
      </label>
      <div class="button_wrap">
        <button class="submit" @click.prevent="login">
          <span>登录</span>
          <i class="fa fa-spinner fa-spin" v-show="icon"></i>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      user: {
        name: '',
        pwd: ''
      },
      icon: false,
      req: false
    }
  },
  methods: {
    login() {
      this.icon = true
      this.req = false

      setTimeout(() => {
        this.$store.dispatch('signIn', this.user)

        if(sessionStorage.login && sessionStorage.login == 1) {
          this.$router.replace('/contacts')
          this.icon = false
        }else {
          this.icon = false
          this.req = true
        }
      },1000)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../assets/css/login.less');
</style>